import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Dimensions,
  Image,
  Alert,
  FlatList,
} from 'react-native';
import React, {useEffect, use, useState} from 'react';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Swiper from 'react-native-swiper';
import Geolocation from '@react-native-community/geolocation';
import UseStorage from '../../utils/useStorage';
import {getCityInfo, getThreeDays, getWeatherIndices} from '../../apis';
import LinearGradient from 'react-native-linear-gradient';
import weatherIcons from '../../utils/weatherPic';
import SvgCom from '../../utils/SvgCom';
function indicesItem({index, item}) {
  return (
    <TouchableOpacity
      key={'indices-item' + item.type}
      onPress={() => Alert.alert(item.type)}>
      <View style={[styles.indicesItem]}>
        <Text style={[styles.indicesItemName]}>{item.name}</Text>
        <Text style={[styles.indicesItemCategory]}>{item.category}</Text>
      </View>
    </TouchableOpacity>
  );
}
export default function HomeCom() {
  let coords = {
    latitude: 37.00125,
    longitude: 113.56358166666665,
  };
  const [threeDays, setThreeDays] = useState([]);
  const [cityInfo, setCityInfo] = useState({});
  const [weatherIndices, setWeatherIndices] = useState([]);

  useEffect(() => {
    Geolocation.getCurrentPosition(
      info => {
        UseStorage.set('coords', info.coords);
        coords = info.coords;

        getCityInfo(coords).then(res => {
          setCityInfo({...res});
        });

        getWeatherIndices(coords).then(res => {
          setWeatherIndices(res);
        });
        getThreeDays(coords).then(res => {
          setThreeDays(res);
        });
      },
      err => Alert.alert(err.message),
      {timeout: 20000},
    );
  }, []);
  return (
    <View>
      <ScrollView>
        <View style={[styles.rowContainer]}>
          <TouchableOpacity>
            <View style={[styles.itemBase]}>
              <Ionicons
                name="scan-outline"
                size={40}
                color={'white'}></Ionicons>
              <Text style={[styles.fontBase]}>扫一扫</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity>
            <View style={[styles.itemBase]}>
              <Ionicons
                name="qr-code-outline"
                size={40}
                color={'white'}></Ionicons>
              <Text style={[styles.fontBase]}>付款码</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity>
            <View style={[styles.itemBase]}>
              <Ionicons
                name="trail-sign-outline"
                size={40}
                color={'white'}></Ionicons>
              <Text style={[styles.fontBase]}>出行</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity>
            <View style={[styles.itemBase]}>
              <Ionicons
                name="card-outline"
                size={40}
                color={'white'}></Ionicons>
              <Text style={[styles.fontBase]}>卡包</Text>
            </View>
          </TouchableOpacity>
        </View>
        <Swiper
          style={styles.swiperWrapper}
          showsButtons={false}
          autoplay={true}>
          <Image
            style={[styles.slideImage]}
            source={require('../../images/Snipaste_2023-12-05_23-25-38.png')}
          />
          <Image
            style={[styles.slideImage]}
            source={require('../../images/gwen.png')}
          />
          <Image
            style={[styles.slideImage]}
            source={require('../../images/Snipaste_2023-12-05_23-25-38.png')}
          />
        </Swiper>
        <View style={[styles.city]}>
          <Text style={[styles.cityText]}>
            {cityInfo.country}
            {cityInfo.adm1}
            {cityInfo.adm2}
          </Text>
        </View>
        <View style={[styles.indicesContainer]}>
          <FlatList
            data={weatherIndices}
            renderItem={indicesItem}
            keyExtractor={item => item.type}
            horizontal={true}
          />
        </View>
        <View style={[styles.threeDaysContainer]}>
          {threeDays.map((item, index) => {
            return (
              <LinearGradient
                start={{x: 0, y: 0}}
                end={{x: 1, y: 0}}
                colors={['#ddd', '#333']}
                key={'weather' + index}
                style={[styles.dailyItem]}>
                <Text style={[styles.dailyItemTitle]}>{item.fxDate}</Text>
                <View style={[styles.daliyItemContent]}>
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-around',
                    }}>
                    <SvgCom
                      icon={item.iconDay}
                      size={40}
                      style={[styles.weatherIcon]}
                    />
                    <Text>
                      {item.textDay}
                      {item.tempMax}°
                    </Text>
                  </View>
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-around',
                    }}>
                    <SvgCom
                      icon={item.iconNight}
                      size={40}
                      style={[styles.weatherIcon]}
                    />
                    <Text>
                      {item.tempMin}°{item.textNight}
                    </Text>
                  </View>
                </View>
              </LinearGradient>
            );
          })}
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  rowContainer: {
    flex: 1,
    flexDirection: 'row',
  },
  itemBase: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#00b38a',
    height: 90,
    width: Dimensions.get('window').width / 4,
  },
  fontBase: {
    color: '#fff',
    fontSize: 14,
  },
  swiperWrapper: {
    height: 200,
  },
  slideImage: {
    height: 200,
    width: Dimensions.get('window').width,
  },
  city: {
    flex: 1,
    justifyContent: 'center',
  },
  cityText: {
    fontSize: 20,
    fontWeight: 'bold',
    marginHorizontal: 10,
  },
  indicesContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    marginHorizontal: 10,
    marginLeft: 10,
  },
  indicesItem: {
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 20,
    backgroundColor: '#deb',
    width: Dimensions.get('window').width / 3 - 10,
    height: 80,
    marginTop: 10,
    marginRight: 10,
  },
  indicesItemName: {
    color: '#222',
    fontSize: 14,
  },
  indicesItemCategory: {
    color: '#00b38a',
    fontSize: 15,
  },
  threeDaysContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    marginHorizontal: 10,
    flexWrap: 'wrap',
  },
  dailyItem: {
    alignItems: 'center',
    justifyContent: 'space-between',
    borderRadius: 20,
    width: Dimensions.get('window').width - 10,
    marginTop: 10,
  },
  dailyItemTitle: {
    fontSize: 20,
    color: '#eee',
    marginTop: 10,
  },
  daliyItemContent: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: Dimensions.get('window').width - 40,
    marginTop: 10,
    marginBottom: 10,
  },
  weatherIcon: {
    marginHorizontal: 10,
  },
});
